<template>
    <div>
        <nav-bar>
            <div class="back" slot="left" @click="backClick">
                <img src="../../../assets/img/common/back.svg" alt="">
            </div>
        <div class="title" slot="center">
           <div class="item" v-for="(item,index) in titles" :key="index" 
           :class="{active:index===currentIndex}"
           @click="titleClick(index)">
            {{ item }}
        </div>
        </div>
    </nav-bar>
    </div>
</template>

<script>
import NavBar from '../../../components/common/navbar/NavBar.vue'
export default {
  name:'DetailNavar',
  components: { NavBar },
  data(){
    return{
        titles:['商品','参数','评论','推荐'],
        currentIndex:0
    }
  },
  methods:{
    titleClick(index){
       this.currentIndex=index
    },
    backClick(){
        this.$router.go(-1)
    }
  }
  
}
</script>

<style scoped>
    .title{
        display: flex;
    }
    .item{
        flex:1
    }
    .active{
        color:pink
    }
    .back img{
        margin-top: 10px;
    }
</style>